
import React, { CSSProperties, useMemo, useState } from "react";
import { QrcodeOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons";
import { Card, Avatar, Modal, Input, App, Progress, QRCode } from "antd";
import { LibAppView } from "../../../../lib";
import styles from "./style.module.scss";
import { useExport } from "./useExport";

interface ITask {
    activity: string;
    nums: number;
}

interface ITaskProps {
    gotoViews: (name: string) => void;
}

const Meta = Card.Meta;

const cardStyle = { width: "90%", marginTop: 16 };
const plusCardSpanStyle: CSSProperties = {
    fontSize: 30,
    textAlign: "center",
    display: "block",
    cursor: "pointer",
    verticalAlign: "middle",
    height: 98,
    color: "#999",
    lineHeight: "98px"
};

export const TaskList = LibAppView.withService<ITaskProps>({
    reqEndPoints: [
        {
            endPoint: "setting.studentActivityList",
            name: "activityList"
        },
        {
            endPoint: "setting.studentList",
            name: "studentList",
            uri: {
                name: "none"
            }
        }
    ]
})((props) => {
    const plusCardStyle = useMemo(() => ({
        ...cardStyle,
        height: 145
    }), []);
    const [open, setOpen] = useState(false);
    const [ inputStatus ] = useState({
        taskName: ""
    });
    const [ taskList, setTaskList ] = useState<ITask[]>((props.responseData as any).activityList?.data || []);
    const [ studentNums ] = useState<number>((props.responseData as any).studentList?.data?.length || 0);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [ currentPageUrl ] = useState(() => location.href + "?page=detail&name=");
    const showModal = () => {
        setOpen(true);
    };
    const antApp = App.useApp();
    const exportData = useExport();
    const handleOk = () => {
        setConfirmLoading(true);
        props.withServiceApi.send({
            endPoint: "setting.studentActivityAdd",
            data: {
                activity: inputStatus.taskName
            }
        }).then(() => {
            props.withServiceApi.send({
                endPoint: "setting.studentActivityList"
            }).then(({ data }: any) => {
                setTaskList(data || []);
            });
            inputStatus.taskName = "";
            setOpen(false);
            setConfirmLoading(false);
        }).catch((err) => {
            antApp.message.error(err.message);
            setConfirmLoading(false);
            setOpen(false);
        });
    };

    const handleCancel = () => {
        setOpen(false);
    };
    return (<>
          <Modal
            title="添加任务"
            open={open}
            onOk={handleOk}
            confirmLoading={confirmLoading}
            onCancel={handleCancel}
            okText="确定"
            cancelText="取消"
        >
            <Input type="text" onChange={(e) => inputStatus.taskName = e.target.value }/>
        </Modal>
        <section className={styles.cardSection}>
            <Card
                style={plusCardStyle}
                onClick={showModal}
            >
                <span style={plusCardSpanStyle}>
                    <PlusOutlined />
                </span>
            </Card>
            {
                taskList.map((item, index) => {
                    const realNums = item.nums - 1;
                    const percent = studentNums > 0 ? (realNums / studentNums) * 100 : 0;
                    const unFinishedNums = studentNums - realNums;
                    return (
                        <Card
                            key={index}
                            style={cardStyle}
                            actions={[
                                <QrcodeOutlined key="qrcode" onClick={() => {
                                    Modal.info({
                                        title: "扫描二维码",
                                        content: <QRCode value={`${currentPageUrl}${encodeURIComponent(item.activity)}`} />,
                                        okText: "关闭",
                                        onOk: () => {}
                                    });
                                }}/>,
                                <EditOutlined key="views"  onClick={() => {
                                    props.gotoViews(item.activity);
                                }}/>,
                                <span onClick={() => {
                                    props.withLoadingApi.show();
                                    exportData(item.activity).then(() => {
                                        props.withLoadingApi.hide();
                                    }).catch(() => {
                                        props.withLoadingApi.hide();
                                    });
                                }}>导出</span>
                            ]}
                        >
                            <Meta
                                avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />}
                                title={item.activity}
                                description={(<div>
                                    <label>已完成<span style={{color: "green"}}>({realNums})</span>,未完成<span style={{color: "red"}}>({unFinishedNums})</span></label>
                                    <Progress percent={percent} status={ percent >= 100 ? "success" : "exception" }/>
                                </div>)}
                            />
                        </Card>
                    );
                })
            }
            
        </section>
    </>);
});

